import ArrowPrev from 'components/arrow-prev';
import ArrowNext from 'components/arrow-next';
import Link from 'next/link';
import styles from 'styles/page-nav.module.scss'
import { PostMeta } from "interface/post"

const PageNav = (props: { prev?: PostMeta, next?: PostMeta }) => {
  const { prev, next } = props
  return (
    <nav className={styles.container}>
      <p className={styles.inner}>
        {prev && (
          <span className={styles.prev}>
            <ArrowPrev className={styles.icon} />
            <Link href={`/${prev.id}`}>
              <a className='nav-link'>{prev.title}</a>
            </Link>
          </span>
        )}
        {next && (
          <span className={styles.next}>
            <Link href={`/${next.id}`}>
              <a className='nav-link'>{next.title}</a>
            </Link>
            <ArrowNext className={styles.icon} />
          </span>
        )}
      </p>
    </nav>
  )
}

export default PageNav